<script setup>
import { computed, ref, watch } from 'vue';

const currentTab = ref(0);

const config = ref({
  data: [],
  carousel: 'single',
  waitTime: 2000,
  sort: true,
  valueFormatter: ({ value }) => value.toLocaleString(),
});

let props = defineProps(['currentPointsRankingType', 'pointsRankingZoomData'])

watch(() => props.currentPointsRankingType,
  (newVal) => {
    currentTab.value = newVal
  },
  { deep: true, immediate: true }
)
watch(() => props.pointsRankingZoomData,
  (newZoomData) => {
    config.value.data = newZoomData
  },
  { deep: true, immediate: true }
)

// import {
//   getLeaderBoardTable,
// } from '#/api/largeVisualScreen/smallProgram';


// let LeaderBoardTableReq = { type: '0', subOrg: 10 }
// getLeaderBoardTable(LeaderBoardTableReq).then((res) => {
//   // console.log("数据为", res);
// });


const formatRankingData = (data) => {

  // console.log("数据为:",data);
  if (currentTab.value === 0) {
    return data.map((item) => ({
      name: `${item.name} ${item.bank} ${item.detail.length > 15 ? `${item.detail.slice(0, 15)}...` : item.detail}`,
      value: item.value,
    }));
  }
  return data.map((item) => ({
    name: item.name,
    value: item.value,
  }));

};
</script>

<template>
  <!-- "height:260px -->
  <div class="box">

    <dv-scroll-ranking-board :config="config"
      :style="{ 'height': currentTab === 0 ? '200px' : currentTab === 1 ? '200px' : '260px' }" />
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
  // height: 100%;
  padding: 15px 20px 10px 20px;
  box-sizing: border-box;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 10px;

    .title {
      color: #fff;
      font-size: 16px;
      margin-bottom: 16px;
      margin: 5px 0;
      text-align: center;
    }

    .tab-container {
      display: flex;
      gap: 5px;

      .tab-item {
        color: #fff;
        cursor: pointer;
        padding: 5px 5px;
        border-radius: 4px;
        transition: all 0.3s;
      }

      .tab-item:hover {
        background: rgba(65, 194, 240, 0.3);
      }

      .tab-item.active {
        background: rgba(65, 194, 240, 0.7);
      }
    }
  }
}
</style>
